<script setup lang="ts">
	// * 商家销售统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted, watch } from 'vue'
	import { httpJSON } from '@/api/index'
	import { mapApi } from '@api/data'
	import { getProvinceMapInfo } from '@/utils/map_utils'
	import { useTheme } from '@/components/hooks/useTheme'
	const { theme } = useTheme()

	// 容器实例
	const fullRef = ref<HTMLDivElement>()
	// 图表状态数据
	const state = reactive({
		chartsData: [],
		mapKeys: []
	})

	// 监听主题的切换 调用初始化
	watch(theme, () => {
		// 图表销毁
		myEcharts.dispose()
		initCharts()
		getData()
		screenAdapter()
	})

	// echarts实例
	let myEcharts: echarts.ECharts = null

	// * 初始化图表
	const initCharts = async () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, theme.value)
		// 加载地图
		const chinaMap = await httpJSON.get('/china.json')
		// @ts-ignore 注册地图
		echarts.registerMap('china', chinaMap)
		// 配置
		const option: echarts.EChartsOption = {
			title: { text: '| 商家分布', top: 20, left: 20 },
			legend: { left: '5%', bottom: '5%', orient: 'vertical' },
			geo: {
				top: '5%',
				bottom: '5%',
				type: 'map',
				map: 'china',
				itemStyle: {
					areaColor: '#2E72BF',
					borderColor: '#333'
				}
			},
			series: []
		}
		// 设置配置
		myEcharts.setOption(option)
		// @ts-ignore 为图表绑定点击事件
		myEcharts.on('click', async arg => {
			// 显示对应省份地图 -> 加载对应json文件 -> 将name中文名 转为 拼音
			const { key, path } = getProvinceMapInfo(arg.name)
			// 判断是否有key
			if (!key) return
			// 判断是否加载过
			if (!state.mapKeys.includes(key)) {
				// 发起请求加载省份地图
				const map = await httpJSON.get(path)
				// @ts-ignore 注册省份地图
				echarts.registerMap(key, map)
				state.mapKeys.push(key)
				// 修改配置项
				myEcharts.setOption({ geo: { map: key } })
			} else {
				// 修改配置项
				myEcharts.setOption({ geo: { map: key } })
			}
		})
	}

	// * 获取数据
	const getData = async () => {
		const { data } = await mapApi()
		state.chartsData = data
		// 更新配置
		updateCharts()
	}

	// * 更新配置项
	const updateCharts = () => {
		// 处理数据
		const series = state.chartsData.map(
			(item): echarts.SeriesOption => ({
				type: 'effectScatter',
				coordinateSystem: 'geo',
				name: item.name,
				data: item.children,
				rippleEffect: { scale: 5, brushType: 'stroke' }
			})
		)
		// 配置项
		const updateOption: echarts.EChartsOption = {
			series,
			legend: {}
		}
		// 设置配置项
		myEcharts.setOption(updateOption)
	}

	// * 分辨率适配
	const screenAdapter = () => {
		const size = (fullRef.value.offsetWidth / 100) * 3.25
		// 设置配置
		const adapterOption: echarts.EChartsOption = {
			title: { textStyle: { fontSize: size } },
			legend: {
				itemWidth: size / 2,
				itemHeight: size / 2,
				itemGap: size / 2,
				textStyle: { fontSize: size / 2 }
			}
		}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	// 返回中国地图
	const goBack = () => {
		// 修改配置项
		myEcharts.setOption({ geo: { map: 'china' } })
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
	})

	defineExpose({ resize: screenAdapter })
</script>

<template>
	<div class="full_container" ref="fullRef" @dblclick="goBack"></div>
</template>

<style scoped lang="scss"></style>
